<template>
	<div class="jdTable" :style="{ height: _height }" ref="jdTableMain" v-loading="loading">
		<div class="jdTable-table" :style="{ height: _table_height }">
			<el-table ref="table" :data="tableData" style="width: 100%" size="large">
				<el-table-column type="expand" width="10">
					<template #default="props">
						<div style="background: #f6f8f9;">
							<el-row v-if="props.row.childList.length==0">
								<el-col :span="24">
									<el-empty description="暂无流程版本信息" :image-size="100"></el-empty>
								</el-col>
							</el-row>
							<el-row v-else>
								<el-col :lg="8" :xl="6" style="padding: 10px" v-for="(item,index) in props.row.childList" :key="item">
									<el-card class="box-card" shadow="never">
										<template #header>
											<div class="card-header">
											<span>V{{item.version}}</span>
											<el-button-group>
												<el-button text type="primary" @click="formModify(item)" class="button">查看</el-button>
												<el-popconfirm title="确定要使用?" @confirm="changeDefault(item)">
													<template #reference>
													<el-button text type="danger" class="button">使用</el-button>
													</template>
												</el-popconfirm>
											</el-button-group>
											</div>
										</template>
										<el-row>
											<el-col :span="24" style="line-height: 150%;">
												应用名称：{{ item.appName }}<br/>
												流程序号：{{ item.id }}<br/>
												创建时间：{{ item.createTime }}
											</el-col>
										</el-row>
									</el-card>
								</el-col>
							</el-row>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="序号" width="200" prop="id"></el-table-column>
				<el-table-column label="应用名称" witdh="200" prop="appName"></el-table-column>
				<el-table-column label="状态" width="150" prop="status" align="center">
					<template #default="scope">
						<span v-if="scope.row.status == '2'">正常</span>
						<span v-else style="color:#f56c6c">禁用</span>
					</template>
				</el-table-column>
				<el-table-column label="流程版本" width="200" prop="version" align="center">
					<template #default="scope">
						V{{scope.row.version}}
					</template>
				</el-table-column>
				<el-table-column label="创建时间" width="180" prop="createTime"></el-table-column>
				<el-table-column label="操作" fixed="right" width="180" align="center">
					<template #default="scope">
					<el-button-group>
						<el-button text type="primary" @click="formModify(scope.row, scope.$index)" class="button">编辑</el-button>
						<el-popconfirm title="确定要挂起吗？"  @confirm="processChange(scope.row, scope.$index)" v-if="scope.row.status=='2'">
							<template #reference>
								<el-button text type="danger" class="button">挂起</el-button>
							</template>
						</el-popconfirm>
						<el-popconfirm title="确定要激活吗？" @confirm="processChange(scope.row, scope.$index)" v-if="scope.row.status=='1'">
							<template #reference>
								<el-button text type="primary" class="button">激活</el-button>
							</template>
						</el-popconfirm>
						<el-button text type="info" class="button" @click="toggleExpand(scope.row)" :disabled="hasChild(scope.row)">更多</el-button>
					</el-button-group>
					</template>
				</el-table-column>
			</el-table>
			<div style="padding: 15px">
				<el-pagination  background :small="true"  :total="total" :page-size="pageSizes" :page-sizes="pageSizes" v-model:currentPage="currentPage" @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			param:{
				pageNum:1,
				pageSize:20
			},
			tableData: [],
			// 是否默认字典
			defaultType:[],
			// 状态
			statusType:[],
			height:"100%",
			loading:false,
			total:100,
			pageSizes:20,
			currentPage: 1,
			// 展示数组的ID
			expandRowKeys: [],
		}
	},
	computed: {
		_height() {
			return Number(this.height) ? Number(this.height) + "px" : this.height
		},
		_table_height() {
			return this.hidePagination && this.hideDo ? "100%" : "calc(100% - 50px)"
		},
		tableData() {
			this.tableData.map(async (item) => {
				let appFlowList = await this.getAppFlowList(item.appId);
				item.childList  = appFlowList;
			});
			return this.tableData;
		}
	},
	created() {
		this.$nextTick(()=>{
			this.getFlowList();
			this.getDict();
		})
	},
	methods:{
		async getFlowList() {
			this.loading =true;
			let res = await this.$API.app.flow.list.get(this.param)
			if (res.code == 200){
				res.data.rows.map(async (item) => {
					let appFlowList = await this.getAppFlowList(item.appId);
					item.childList  = appFlowList;
				})
				this.tableData = res.data.rows;
				this.total = res.data.total;
			}
			this.loading=false;
		},
		// 获取非默认流程版本
		async getAppFlowList(appId) {
			let param ={appId:appId}
			let res = await this.$API.app.flow.appFlowList.get(param)
			if (res.code == 200){
				return res.data
			}
		},
		// 字典获取
		async getDict() {
			this.defaultType = await this.Dict.get("flow_default_type");
			this.statusType = await this.Dict.get("flow_process_status")
		},
		// 挂起/激活流
		async processChange(row) {
			let res = await this.$API.app.flow.updateFlowStatus.put(row.id)
			if (res.code == 200){
				this.getFlowList()
				this.$message.success(res.msg)
			}
		},
		//分页点击
		paginationChange() {
			this.param.pageNum = this.currentPage;
			this.param.pageSize = this.pageSizes;
			this.getFlowList();
		},
		//条数变化
		pageSizeChange(size) {
			this.param.pageSize = size;
			this.getFlowList();
		},
		formModify(row) {
			let routeData = this.$router.resolve({
				path: '/app/store/design/workflow',
				query: {
					appId: row.appId,
					modelId: row.id
				}
			})
			window.open(routeData.href, "_blank")
		},
		// 设置为默认版本
		async changeDefault(row) {
			let data={appId:row.appId,flowVersion:row.version}
			let res = await this.$API.app.flow.updateDefaultFlow.put(data)
			if (res.code == 200){
				this.$message.success("设置成功")
				this.getFlowList();
			}else {
				this.$message.success("设置失败")
			}
		},
		// 设置展开子项
		toggleExpand(row){
			let $table = this.$refs.table;
			this.tableData.map((item) => {
		    	 if (row.id != item.id) {
					$table.toggleRowExpansion(item, false)
				}
		   })
			$table.toggleRowExpansion(row)
		},
		// 存在子节点
		hasChild(row){
			return row.childList == undefined || row.childList == null || row.childList.length<=0;
		},
	},
}
</script>

<style lang="scss" scoped>
:deep(.el-table__expand-icon)  { display: none;}
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.el-col .el-card{
	margin-bottom: 0px;
}
</style>
